<template>
  <Card dis-hover :bordered="false">
    <Row type="flex" justify="space-between" class="ivu-mb-8">
      <Col>
        <Row :gutter="8" class="ivu-mb-8" type="flex">
          <Col
            ><DatePicker
              v-model="date"
              type="daterange"
              @on-change="askData"
              :options="options"
              placement="bottom-end"
              placeholder="请选择时间"
              style="width: 200px"
            ></DatePicker
          ></Col>
          <Col
            ><Button
              @click="askDatas(1)"
              :type="params.type == 1 ? 'primary' : 'default'"
              >部门</Button
            ></Col
          >
          <!-- <Col><Button @click="askDatas(2)" :type="params.type==2?'primary':'default'">角色</Button></Col> -->
          <Col
            ><Button
              @click="askDatas(3)"
              :type="params.type == 3 ? 'primary' : 'default'"
              >人员</Button
            ></Col
          >
          <Col
            ><Input
              placeholder="请输入人员"
              v-if="params.type == 3"
              v-model="titleName"
              @on-enter="changeEnter"
            ></Input
          ></Col>
        </Row>
      </Col>
      <Col><Button @click="exportexcel" type="primary">导出</Button></Col>
    </Row>
    <Table
      :columns="columns"
      :data="data"
      :loading="loading"
      :max-height="600"
      @on-sort-change="sortchange"
      show-summary
    >
      <template slot="header_name" slot-scope="{ row }">
        <a @click="openDrawer(row)">{{ row.header_name }}</a>
      </template>
    </Table>
    <Drawer :title="title" :closable="false" v-model="valueDrawer" :width="70">
      <Table
        :columns="columnsDrawer"
        :data="dataDrawer"
        :loading="loadingDrawer"
        show-summary
      >
      </Table>
    </Drawer>
  </Card>
</template>
<script>
import { rbacmenumenulog } from "@api/hqapi";
import Setting from "@/setting";
import { utils } from "xlsx";
import util from "@/libs/util";
export default {
  name: "menuClick",
  data() {
    return {
      loading: false,
      params: { type: 1, start: "", end: "", sortKey: "" },
      date: [new Date(), new Date()],
      data: [],
      columns: [],
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
      title: "",
      valueDrawer: false,
      dataDrawer: [],
      columnsDrawer: [],
      loadingDrawer: false,
      titleName: "",
      copay: [],
      newData: [],
    };
  },
  computed: {},
  mounted() {
    this.initial();
  },
  methods: {
    sortchange(e) {
      // console.log(e,'111')
      this.params.sortKey = e.key;
      this.initial();
    },
    initial() {
      this.askData();
    },
    askData() {
      this.loading = true;
      let params = {
        type: this.params.type,
        start: this.date[0]
          ? this.$Date(this.date[0]).format("YYYY-MM-DD")
          : "",
        end: this.date[1] ? this.$Date(this.date[1]).format("YYYY-MM-DD") : "",
        sortKey: this.params.sortKey,
      };
      rbacmenumenulog(params).then((res) => {
        this.columns = res.header;
        this.data = res.list;
        this.copay = res.list;
        this.loading = false;
      });
    },
    askDatas(num) {
      this.params.type = num;
      this.askData();
    },
    changeEnter() {
      if (this.titleName == "") {
        this.data = this.copay;
        // console.log( this.data,'ti')
      } else {
        this.data.forEach((item) => {
          if (item.header_name.includes(this.titleName)) {
            this.newData.push(item);
          }
        });
        this.data = this.newData;
      }
    },
    openDrawer(row) {
      this.title = row.header_name;
      this.loadingDrawer = true;
      let params = {
        type: this.params.type,
        start: this.date[0]
          ? this.$Date(this.date[0]).format("YYYY-MM-DD")
          : "",
        end: this.date[1] ? this.$Date(this.date[1]).format("YYYY-MM-DD") : "",
        header_id: row.header_id,
      };
      rbacmenumenulog(params).then((res) => {
        this.columnsDrawer = res.header;
        this.dataDrawer = res.list;
        this.valueDrawer = true;
        this.loadingDrawer = false;
      });
    },
    exportexcel() {
      let params = {
        type: this.params.type,
        start: this.date[0]
          ? this.$Date(this.date[0]).format("YYYY-MM-DD")
          : "",
        end: this.date[1] ? this.$Date(this.date[1]).format("YYYY-MM-DD") : "",
        project_id: localStorage.getItem("currentProject"),
        auth_access_token: util.cookies.get("token"),
        auth_project_id: localStorage.getItem("currentProject"),
        auth_member_id: util.cookies.get("uuid"),
      };
      let urltitle = Setting.apiBaseURL;
      let urls = `type=${params.type}&start=${params.start}&end=${params.end}&project_id=${params.project_id}&auth_access_token=${params.auth_access_token}&auth_project_id=${params.auth_project_id}&auth_member_id=${params.auth_member_id}`;
      let url = `${urltitle}/v1/rbac/menu/down-excel?${urls}`;
      window.open(url);
    },
  },
};
</script>
